<template>
  <div class="show-msg" id="show-msg">
    <div v-for="(item, index) in messages">
    <div
      
      class="msg-item"
      :class="{ mymsg: item.send_id === _id }"
    >
      <img :src="item.avatar" alt="" @click="to_uindex(item)" />
      <div class="text">
        <div class="name">
          {{ item.nickname }}
        </div>
        <div id="msg" class="msg" v-html="EmojiHandle(item.msg)"></div>
      </div>
    </div>
    </div>
  </div>
</template>
<script>
import { emojis, markArr } from "../../../../common/emoji";
export default {
  name: "Msg",
  props: {},
  data() {
    return {
      messages: [],
      emojiUrl: "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/"
    };
  },
  computed: {
    _id() {
      //自己的id
      return (
        this.$store.getters.user._id ||
        JSON.parse(localStorage.getItem("userInfo"))._id ||
        ""
      );
    },
    receiveId() {
      //接收者id
      return this.$route.params.uid || "";
    }
  },
  mounted() {
    this.getPrivatemsg(); //获取与好友的聊天记录
    this.read();
    this.messages = this.$store.state[`${this.receiveId}`];
    this.$bus.$on("private", data => {
      this.messages.push(data);
      console.log(this.messages);
    });
  },
  methods: {
    //表情处理函数
    EmojiHandle(msg) {
      console.log(msg);
      let reg = /\[(.*?)\]/g;
      let text = msg.match(reg);
      console.log(text);
      if (text) {
        text.forEach(e => {
          let file = emojis.filter(item => {
            if (item.mark == e) {
              return item.file;
            }
          });
          msg = this.replaceCode(file, msg);
        });
        return msg;
        // return msg = msg
      } else {
        return msg;
      }
    },
    replaceCode(emojis, content) {
      console.log(emojis, content);
      let newContent = "";
      if (emojis == []) {
        return msg;
      }
      for (let i = 0; i < emojis.length; i++) {
        newContent = content.replace(
          emojis[i].mark,
          `<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${emojis[i].file}" >`
        );
        console.log(newContent);
        // emojisArr.shift()
        // console.log(emojisArr)
        // return this.replaceCode(emojisArr,newContent)
      }
      return newContent;
    },
    to_uindex(item) {
      //查看用户主页
      // console.log(item)
      let uid = item.send_id;
      this.$router.push("/uindex/" + uid);
    },
    getPrivatemsg() {
      //从数据库获取聊天记录
      let data = {
        send_id: this._id,
        receive_id: this.receiveId
      };
      this.$axios({
        url: "/chat/getprivate",
        method: "post",
        data: data
      }).then(res => {
        let data = {
          receive_id: this.receiveId,
          msgList: res.data
        };
        this.messages = res.data;
        this.$store.dispatch("GetPrivateMsg", data);
        // this.messages = this.$store.state[`${this.receiveId}`]
        // console.log(data);
      });
    },
    //清除未读状态
    read() {
      this.$store.dispatch("Read", this.receiveId);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.show-msg {
  overflow: hidden;
  position: relative;
}

.show-msg {
  /* height: 100vh; */
  /* padding: 10px 5px 0 5px; */
  margin-top: 60px;
  margin-bottom: 49px;
}
.msg-item {
  position: relative;
  /* transform-style: preserve-3d; */
  /* transform: rotateY(180deg); */
  padding: 0 10px;
  /* display: flex; */
  margin-top: 10px;
}
.msg-item img {
  width: 40px;
  height: 40px;
  border-radius: 5px;
  /* float: left; */
}
.msg-item .text {
  display: inline-block;
}
.msg-item .name {
  font-size: 14px;
  margin-left: 10px;
}
.msg-item .msg {
  max-width: 250px;
  border-radius: 5px;
  text-align: left;
  /* white-space: normal; */
  word-break: break-all;
  word-wrap: break-word;
  margin-top: 5px;
  margin-left: 5px;
  padding: 10px;
  border: 0.5px solid #888;
}
.mymsg .msg {
  background-color: rgb(115, 233, 115);
}
.mymsg .msg-item {
  position: relative;
}
.mymsg img {
  /* float: right; */
  /* position: absolute; */
  right: 10px;
}
.mymsg .float {
  /* position: absolute;
  right: 10px; */
}
.mymsg .text {
  /* float: right; */
  /* display: inline-block; */
  /* float: right; */
  /* display: block; */
  /* position: absolute; */

}
.mymsg .msg {
}
</style>
